<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
	<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
	    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" 
	content="IE=edge,chrome=1">

	<title>{{ page_title }}</title>
	<meta name="description" 
	content="Bus Planner Web Appication">
	<meta name="author" content="Ernesto Celis">
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="/css/style.css">

	<script src="/js/libs/modernizr-2.5.3.min.js"></script>
    </head>
    <body>
    <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

    <!-- The header element represents a group of introductory or
    navigational aids -->
    <header>
    <!-- The hgroup element is used to group a set of h1-h6 elements
    when the heading has multiple levels, such as subheadings,
    alternative titles, or taglines. -->
	<hgroup>
	    <h1>Bus Planner Admin Console</h1>
	    <p>User:&nbsp;{{ user }}</p>
	<hgroup>
	<!-- The nav element represents a section of a page that links
	to other pages or to parts within the page: a section with
	navigation links. -->
	<nav>
	    <ul>
		<li><a href="#">HOme</a></li>
		<li><a href="#">Routes</a></li>
	    </ul>
	</nav>
    </header>

    <div role="main">
	<div id="new_route">
	    <form action="/bp-admin/route/add" 
		method="post" name="route">
		Code: <input type="text" name="code" 
		value="{{ code }}"/>

		Color: <select name="color" size="8">
		    {% for color_item in colors %}
		    <option value="{{ color_item }}" 
		    style="color:{{ color_item }};
		    background-color:{{ color_item }};">X</option>
		    {% endfor %}
		</select>
		Description: <textarea name="description" rows="3"
		    cols="60"></textarea>
		Vehicle type: <select name="vehicle">
		    {% for vehicle in vehicles %}
		    <option value="{{ vehicle }}">
		    {{ vehicle }}
		    </option>
		    {% endfor %}
		</select>
		Coordinate String: <textarea name="geometry" cols="60"
		    rows="3"></textarea>
		<input type="submit" value="Put route" />
	    </form>
	</div>

	<div id="routes_list">
	    <table>
		<thead>
		    <tr>
			<th>Code</th>
			<th>Color</th>
			<th>Description</th>
			<th>Type</th>
		    </tr>
		</thead>
		<tbody>
		    {% for route_item in routes %}
		    <tr>
			<td colspan="4"><a 
				href="/bp-admin/?code={{ route_item.code }}">
				{{ route_item.code }}
				{{ route_item.color }}
				{{ route_item.description }}
				{{ route_item.vehicle }}</a></td>
		    </tr>
		    {% endfor %}
		</tbody>
	    </table>
	</div>

	<div id="new_stop">
	    <form name="stop" method="post"
		action="/bp-admin/route/addstop?code={{ code }}">
		Lat/Lon: <input type="text" name="geometry">
		Reference: <textarea name="description" cols="60"
		    rows="3"></textarea>
		<label name="votes">Votes:</label>
		<input type="hidden" name="route" value="">
		<input type="submit" value="Put stop">
	    </form>
	</div>
	<div id="route_stops">
	    <table>
		<tbody>
		    {% for stop_item in stops %}
		    <tr>
			<td colspan="3">{{ stop_item.geometry }}
			    {{ stop_item.description }}
			    {{ stop_item.votes }}</td>
		    </tr>
		    {% endfor %}
		</tbody>
	    </table>
	</div>

	<!-- The aside element represents a section of a page that
	consists of content that is tangentially related to the content
	around the aside element, and which could be considered separate
	from that content. Such sections are often represented as
	sidebars in printed typography. -->
	<aside>
	    <b>Nothing here yet!</b>
	</aside>
    </div>

    <!-- The footer element represents the footer for the section it
    applies to. A footer typically contains information about its
    section such as who wrote it, links to related documents, copyright
    data, and the like. -->
    <footer>
	<div id="state">{{ infor }}</div>
	<div id="copy">
	<a href="http://appengine.google.com"><img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" 
	alt="Powered by Google App Engine" /></a>
	<a href="http://www.vim.org"><img src="/images/vim.png" alt="Hecho con Vim" /></a>
	<a href="http://www.python.org"><img src="/images/python.png" alt="Con la potencia de Python" /></a>
	<a href="http://code.google.com/p/bus-planing/">Sitio web</a>&nbsp;|
	&copy;2011,2012 Ernesto <a href="http://ernesto.celisdelafuente.net">CELISDELAFUENTE</a>
	</div>

    </footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

    <script src="js/plugins.js"></script>
    <script src="js/script.js"></script>
    <script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

    </body>
    </html>
